import React, { Component } from 'react';

export default class Mouse extends Component {
    constructor(props) {
        super(props);
        this.handleMouseMove = this.handleMouseMove.bind(this);
        this.state = { x: 0, y: 0 };
    }
    
    handleMouseMove(event) {
        this.setState({
          x: event.clientX,
          y: event.clientY
        });
    }
    
    render() {
        return (
          <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
              {/*
                使用 `render`prop 动态决定要渲染的内容，
                而不是给出一个 <Mouse> 渲染结果的静态表示
                */}
            {/* <p>当前的鼠标位置是 ({this.state.x}, {this.state.y})</p> */}
            { this.props.render(this.state) }
          </div>
        );
    }
}
